<template>
    <div>
        <div class="card">
            <h2 class="text-lg font-medium text-gray-900 mb-4">漏洞列表</h2>
            
            <!-- 搜索框 -->
            <div class="mb-6">
                <input
                    v-model="searchQuery"
                    type="text"
                    placeholder="搜索漏洞..."
                    class="input"
                />
            </div>

            <!-- 加载状态 -->
            <div v-if="loading" class="text-center py-4">
                <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500 mx-auto"></div>
            </div>

            <!-- 漏洞列表 -->
            <div v-else class="overflow-x-auto">
                <table class="table">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>包名</th>
                            <th>严重程度</th>
                            <th>发布日期</th>
                            <th>状态</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="vuln in filteredVulnerabilities" :key="vuln.id">
                            <td>{{ vuln.id }}</td>
                            <td>{{ vuln.package }}</td>
                            <td>
                                <span class="badge" :class="getSeverityClass(vuln.severity)">
                                    {{ vuln.severity }}
                                </span>
                            </td>
                            <td>{{ formatDate(vuln.published) }}</td>
                            <td>
                                <span class="badge" :class="vuln.fixed ? 'badge-low' : 'badge-high'">
                                    {{ vuln.fixed ? '已修复' : '未修复' }}
                                </span>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'

const vulnerabilities = ref([])
const loading = ref(true)
const searchQuery = ref('')

const getSeverityClass = (severity) => {
    switch (severity?.toLowerCase()) {
        case 'high':
            return 'badge-high'
        case 'medium':
            return 'badge-medium'
        case 'low':
            return 'badge-low'
        default:
            return 'badge-medium'
    }
}

const formatDate = (date) => {
    if (!date) return ''
    return new Date(date).toLocaleDateString()
}

const filteredVulnerabilities = computed(() => {
    if (!searchQuery.value) return vulnerabilities.value
    
    const query = searchQuery.value.toLowerCase()
    return vulnerabilities.value.filter(vuln => 
        vuln.id.toLowerCase().includes(query) ||
        vuln.package.toLowerCase().includes(query) ||
        vuln.description?.toLowerCase().includes(query) ||
        vuln.severity?.toLowerCase().includes(query)
    )
})

const fetchVulnerabilities = async () => {
    try {
        const response = await fetch('/api/vulnerabilities')
        const data = await response.json()
        vulnerabilities.value = data.vulnerabilities
    } catch (error) {
        console.error('Error fetching vulnerabilities:', error)
    } finally {
        loading.value = false
    }
}

onMounted(fetchVulnerabilities)
</script> 